<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Document</title>
<script src="assets/js/jquery-1.8.3.min.js" type="text/javascript" charset="utf-8"></script>
<!--原人员树通用库-->
<script src="assets/js/common-ui.js" type="text/javascript" charset="utf-8"></script>
<!--滚动条-->
<script src="assets/js/jquery.slimscroll.min.js" type="text/javascript"></script>
<!--移动端touch事件-->
<script src="assets/js/touch.min.js" type="text/javascript" charset="utf-8"></script>
<!--树状图核心库-->
<script src="assets/js/zTree/jquery.ztree.core.min.js" type="text/javascript" charset="utf-8"></script>
<!--多选框拓展-->
<script src="assets/js/zTree/jquery.ztree.excheck.min.js" type="text/javascript" charset="utf-8"></script>
<!--隐藏拓展-->
<script src="assets/js/zTree/jquery.ztree.exhide.min.js" type="text/javascript" charset="utf-8"></script>
<!--页面独立树状图生成及操作函数-->
<script src="assets/js/function.zTree.js" type="text/javascript" charset="utf-8"></script>
<!--树状图原生样式表-->
<link rel="stylesheet" type="text/css" href="assets/css/zTreeStyle/zTreeStyle.css"/>
<!--原树状图通用样式类-->
<link rel="stylesheet" type="text/css" href="assets/css/common.css"/>
<!--新版树状图样式-->
<link rel="stylesheet" type="text/css" href="assets/css/OAzTree.css"/>
<style type="text/css"></style>
<script type="text/javascript">
$(document).ready(function() {
	//从接口获取TAB组信息
	$.ajax({
		//测试用本地json数据
		url: './ajaxData/getTreeGroupSet.json?t=' + new Date().getTime(),
		dataType: "json",
		async:false,
		success: function(data) {
			if(data.length>0){
				//存储分组信息
				_globalObject.groupList = data;
				_globalObject.nodeCache = {};
				//生成tab标签组
				createTabsHtml(data);
				//绑定tab切换事件
				$('.tw-tabs-nav').find('[data-tab-idx]').click(function(){
					var tab_idx = $(this).attr('data-tab-idx');
					var $zTreeObj = $('.tw-tab-panel[data-tab-idx='+tab_idx+']').find('.ztree'); 
					if( $zTreeObj.length > 0 ){
						dataRelation($zTreeObj.attr('id'));
					}else{
						alert('tab切换数据联动异常');
					}
				})
				//获取每个tab标签下的节点json
				$.each(data, function(i,e){
					$.ajax({
						url:addUrlPara(e.apiUrl,'t', new Date().getTime()),//加上随机参数
						dataType: "json",
						async: false,
						success: function(chilData){
							if(chilData.length>0){
								//测试==>>重组了json//缓存起来
								_globalObject.nodeCache[e.domId] = reBuildJson(chilData,[]);
								
								//$('body').append('<code>'+JSON.stringify(_globalObject.nodeCache[e.domId])+'</code>');
							}else{
								alert(e.name+'人员数据拉取异常');
							}
						}
					})
				})
				//创建树结构
				$.each(data, function(i,e){
					var t = $("#"+e.domId);
					var setting = {
						check: {
							enable: true//开启多选框
						},
						data: {
							simpleData: {
								enable: true//json格式化
							}
						},
						view: {
							dblClickExpand: false,//关闭双击事件
							expandSpeed: '',//取消展开动画
							autoCancelSelected: false,
							selectedMulti: false
						},
						callback: {
							onClick: nodeOnClick,//点击事件
							onCheck: nodeOnCheck//checkbox事件
						}
					};
					var zNodes = _globalObject.nodeCache[e.domId];
					t = $.fn.zTree.init(t, setting, zNodes);
				})
				//console.log(JSON.stringify(_globalObject.nodeCache['ownOrg']));
				//绑定移动端hold长按事件
				if(_globalObject.isMobiles){
					touch.on('.ztree li a span', 'touchstart touchend hold', function(ev){
						//阻止默认行为
						if(ev.type=='touchstart'){
							ev.preventDefault();
							_globalObject.touchStartTime = ev.timeStamp;
						}
						//判断时长，若小于长按，则触发点击事件
						if(ev.type=='touchend'){
							_globalObject.touchEndTime = ev.timeStamp;
							var t = _globalObject.touchEndTime - _globalObject.touchStartTime;
							if(t<650){
								touch.trigger(ev.target, 'click');
							}
						}
						//长按事件，获取父级li标签id，获取node，触发check事件
						if(ev.type=='hold'){
							var obj = $(ev.target).parentsUntil('.ztree').parent('.ztree');
							if(obj.length>0){
								var zTree = $.fn.zTree.getZTreeObj(obj.attr('id'));
								var tObj = $(ev.target).parentsUntil('li').parent('li');
								if(tObj.length>0){
									var tId = tObj.attr('id');
									var ckNode = zTree.getNodeByTId(tId);
									if(ckNode!==null){
										zTree.checkNode(ckNode, null, true, true);
									}else{
										alert('tId node is null');
									}
								}else{
									alert('tId is null');
								}
							}else{
								alert('hold error');
							}
						}
					});
				}
			}else{
				alert('分组信息接口异常');
			}
	    }
	});
});
</script>
</head>
<body>
	<div class="tw-usertree-wrap clearfix" style="/*height: 468px;*/">
	    <div class="tw-usertree-left">
		    <div class="tw-usertree-group">
			    <div class="tw-hd">
				    <div class="tw-title">联系组</div>
					<div class="tw-more">
					    <i class="tw-icon-pencil" onclick="modifyGName()"></i>
					    <i class="tw-icon-plus-circle" onclick="addCommonGroup()"></i>
	                    <div class="bd" style="display: none;padding:10px" id="newGroupNameDiv">
						    <div class="tw-usertree-search">
							    名称：<input type="text" class="tw-form-text" id="newGroupName">
							</div>
						</div>
					</div>
				</div>
				<div class="tw-bd">
					<div class="JS_scroll">
						<ul>
							<li>
				    	 		<a style="cursor:pointer" onclick="" item-id-data="B5B5626B6472490996353FD526BC85F6">辅导记录抄送</a>
				    	 		<i class="tw-usertree-del tw-icon-trash" onclick="deleteGroup('B5B5626B6472490996353FD526BC85F6');" style="display: none;"></i>
				    	 	</li>
							<li>
				    	 		<a style="cursor:pointer" onclick="" item-id-data="A3374BBA81A14ED8B1AFB0CAAAE3567B">辅导记录抄送</a>
				    	 		<i class="tw-usertree-del tw-icon-trash" onclick="deleteGroup('A3374BBA81A14ED8B1AFB0CAAAE3567B');" style="display: none;"></i>
				    	 	</li>
						<!--<c:forEach var="item" items="${cgs}" varStatus="status">
							<li>
								<a style="cursor:pointer" onclick="" item-id-data="${item.id}">${item.name}</a>
								<i class="tw-usertree-del tw-icon-trash" onclick="deleteGroup('${item.id}');"></i>
							</li>
						</c:forEach>-->
						</ul>
					</div>
				</div>
			</div>
		</div>
	    <div class="tw-usertree-right">
		    <div class="tw-usertree-box clearfix">
				<div class="tw-usertree-list-style">
				    <div class="hd">选择联系人</div>
                    <div class="bd" style="padding:0">
						<div class="tw-usertree-tabs">
							<ul class="tw-tabs-nav" style="height: 0;overflow: hidden;padding: 0;border: none;"></ul>
							<div class="tw-tabs-bd">
								
							</div>
						</div>
					</div>					
				</div>
				<div class="tw-usertree-select">
				    <div class="tw-mod">
					    <div class="tw-hd">已经添加到该组的联系人<span>(<b id="countNum">0</b>)</span><span class="fr" onclick="delAll()">全部移除</span></div>
						<div class="tw-bd">
							<div class="JS_scroll">
								<ul class="tw-usertree-list">
								</ul>
								<ul class="tw-usertree-deplist" style="display:none">
								</ul>
							</div>
						</div>
						<select id="oldSelect" size="20" style="display:none; width:100%;height: 290px;border: 1px dashed #C2C2C2" multiple="multiple">
							<!--<c:forEach var="m" items="${mapList}">
								<option value="${m.employee_id }|${m.employee_name }|${m.employee_shortdn }">${m.employee_name} { ${m.employee_shortdn} }</option>
							</c:forEach>-->
						</select>
						<select id="depSelect" size="20" style="display:none; " multiple="multiple">
						</select>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="tw-search-bar tar">
	    <div class="tw-top-tool">
		     <div class="tw-btn-primary" style="cursor:pointer" onclick="saveUsers();">
                <i class="tw-icon-save"></i> 保存
            </div>
            <div class="tw-btn" style="cursor:pointer" onclick="go_link(document.referrer);">
                <i class="tw-icon-remove"></i> 返回
            </div>
		</div>
	</div>
<script type="text/javascript"> 
var groupId;

$(document).ready(function() { 
	//设置点击效果
	$(".tw-usertree-group .tw-bd ul li").hover(function() { 
	$(".tw-usertree-group .tw-bd ul li").removeClass("gray");    	
		$(this).addClass("gray");
		$(this).find(".tw-usertree-del").show();
   	},function(){
   		$(this).removeClass("gray");
   		$(this).find(".tw-usertree-del").hide();
   	}); 
   	$(".tw-usertree-group .tw-bd ul li").click(function() { 
    	$(".tw-usertree-group .tw-bd ul li").removeClass("active");
      	$(".tw-usertree-group .tw-usertree-del").hide();
      	$(this).addClass("active");
      	$(this).find(".tw-usertree-del").show();
      	groupId = $(this).find("a").attr('item-id-data');
      	showUsers($(this).find("a"));
	});
   	//加载layer皮肤
  	layer.use('/extend/layer.ext.js');
  	layer.config({
     	 	extend: ['skin/layer-tw.css'], //加载新皮肤
     	 	skin: 'layer-ext-myskin' //一旦设定，所有弹层风格都采用此主题。
  	});

});

function deleteGroup(gid){
	layer.confirm("确定要删除吗？",function(){
		$.ajax({
	        async:true,//是否异步
	        type:"POST",//请求类型post\get
	        cache:false,//是否使用缓存
	        dataType:"text",//返回值类型
	        data:{"gid":gid},
	        url:"${ctx}/departmentTree_deleteUserGroup.do",
	        success:function(text){
	        	layer.msg("删除成功",{time:1000,icon:1},function(){
	        		window.location.reload();
	        	});
	        }
	    });
	});
}

function modifyGName(){
	if(groupId){
		layer.open({
			title:"修改常用组名",
			type:1,
			area:['250px','140px'],
			content:$('#newGroupNameDiv'),
			btn:['确认','取消'],
			yes:function(index,layero){
				if($.trim(layero.find('#newGroupName').val())!=''){
					$.ajax({
						async:true,//是否异步
						type:"POST",//请求类型post\get
						cache:false,//是否使用缓存
						dataType:"text",//返回值类型
						data:{"groupId":groupId,"name":layero.find('#newGroupName').val()},
						url:"${ctx}/departmentTree_modifyUserGroup.do",
						success:function(text){
							if(text=='ok'){
								layer.close(index);
								layer.msg("修改成功",{time:1000,icon:1},function(){
									window.location.reload();
								});
							}else{
								layer.msg("请输入名称",{time:1000,icon:0});
							}
						}
					});
				}else{
					layer.msg("名称只能输入非空字符",{time:1000,icon:0});
				}
			}
		});
	}else{
		layer.msg("请选择一个组",{time:1000,icon:0});
	}
}
 
function addCommonGroup(){
	layer.open({
		title:"新增常用组",
		type:1,
		area:['250px','140px'],
		content:$('#newGroupNameDiv'),
		btn:['确认','取消'],
		yes:function(index,layero){
			if($.trim(layero.find('#newGroupName').val())!=''){
				$.ajax({
					async:true,//是否异步
					type:"POST",//请求类型post\get
					cache:false,//是否使用缓存
					dataType:"text",//返回值类型
					data:{"name":layero.find('#newGroupName').val()},
					url:"${ctx}/departmentTree_addUserGroup.do",
					success:function(text){
						if(text=='ok'){
							layer.close(index);
							layer.msg("新增成功",{time:1000,icon:1},function(){
								window.location.reload();
							});
						}else{
							layer.msg("请输入名称",{time:1000,icon:0});
						}
					}
				});
			}else{
				layer.msg("名称只能输入非空字符",{time:1000,icon:0});
			}
		}
	});
}



function showUsers(o){
	var oldSelect = document.getElementById('oldSelect');
	delAll();
	$.ajax({
		async:true,//是否异步
		type:"POST",//请求类型post\get
		cache:false,//是否使用缓存
		dataType:"text",//返回值类型
		data:{"groupId":$(o).attr('item-id-data')},
		url:"${ctx}/departmentTree_getGroupUsers.do",
		success:function(text){
			if(text){
				var ret = eval("("+text+")");
				for(var i=0;i<ret.length;i++){
					var _html = '<li data-id='+ ret[i].empId +'><span>'+ ret[i].empName +'</span> <i class="tw-usertree-del tw-icon-times-circle" onclick="deltree(this,0)"></i></li>';
					$(".tw-usertree-list").append(_html);
					oldSelect.options.add(new Option(ret[i].empName,ret[i].empId));
				}
				//加载
				var domId = $('.tw-tabs-bd').find('.tw-tab-panel:eq(0)').find('.ztree').attr('id');
				if(domId){
					dataRelation(domId);
				}
			}
		}
	});
}

function saveUsers(){
	if(groupId){
		var oldSelect = document.getElementById('oldSelect');
		if(oldSelect.options.length<=0){
			layer.msg("请为人员组选择人员",{time:1000,icon:0});
		}else{
			var persons = [];
			for(var i = 0 ; i < oldSelect.options.length; i++){
				var person = {};
				person.id = oldSelect.options[i].value;
				person.name = oldSelect.options[i].text;
				persons.push(person);
			}
			$.ajax({
				async:true,//是否异步
				type:"POST",//请求类型post\get
				cache:false,//是否使用缓存
				dataType:"text",//返回值类型
				data:{"persons":JSON.stringify(persons),"groupId":groupId},
				url:"${ctx}/departmentTree_addGroupUsers.do",
				success:function(text){
					if(text=='ok'){
						layer.msg("更新人员组人员成功",{time:1000,icon:1});
					}else{
						layer.msg("更新人员组人员失败",{time:1000,icon:0});
					}
				}
			});
		}
	}else{
		layer.msg("请选择人员组",{time:1000,icon:0});
	}
}

function go_link(url){
	location.href = url;
}

</script>
</body>
</html>
